<template>
  <div>
    <div class="search-result-list">
      <template v-if="searchResults.length > 0">
        <div v-for="result in searchResults" :key="result.id" class="result-item">
          <p class="result-title">{{ result.title }}</p>
          <p class="result-time">{{ result.time }}</p>
          <el-divider></el-divider>
        </div>
      </template>
      <template v-else>
        <p>No results found.</p>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const searchResults = ref([
 
  // Add more results here...
]);

const selectedSubjectType = ref('all');
</script>

<style scoped>
.search-result-count {
  margin-bottom: 20px;
}

.subject-type-filter {
  margin-bottom: 20px;
}

.search-result-list {
  .result-item {
    margin-bottom: 20px;
    .result-title {
      font-size: 14px;
      color: #333333;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 20px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .result-time {
      font-size: 14px;
      color: #999999;
      margin-top: 10px;
    }
  }
}
</style>